<template>
	<view class="order" style="height: 100vh;width: 100%;overflow: scroll;background-color: #F7FCFF;">
		<u-navbar title="工单详情">
			<view slot="right" style="margin-right: 40upx;color: #0585F2;font-size: 24upx;" @click="getRouter">投诉</view>
		</u-navbar>
		<view class="content">
			—— {{ data.status }} ——
		</view>
		<view class="content-xs">
			<view class="font-30-color" style="margin-top: 29upx;margin-left: 25upx;">
				<text class="_imgs"><u-icon name="order" color="#333333" size="28"></u-icon></text>
				<text style="margin-left: 15upx;">工单信息</text>
			</view>
			<view class="content-xs-line">
				<view>
					<view class="content-list-detail">
						<view class="list-left">姓名</view>
						<view class="list-right">{{ data.work_order_operater }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">性别</view>
						<view class="list-right">{{ data.sex == 0 ? '女' : '男' }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">处理时间</view>
						<view class="list-right">{{ data.create_time }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">微信</view>
						<view class="list-right">{{ data.wechat }}</view>
					</view>
					<view class="content-list-detail">
						<view class="list-left">在读年级</view>
						<view class="list-right">小学三年级</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">所在地</view>
						<view class="list-right">{{ data.city }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">联系方式</view>
						<view class="list-right">{{ data.mobile }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">意向专业</view>
						<view class="list-right">{{ data.category }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">学习目标</view>
						<view class="list-right">{{ data.competitor }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">关心问题</view>
						<view class="list-right">{{ data.clue_operater }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">类型</view>
						<view class="list-right">{{ data.type_text }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">分发机制</view>
						<view class="list-right">{{ data.send_count }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">当前情况</view>
						<view class="list-right">{{ data.desc }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">竞品机构</view>
						<view class="list-right">{{ data.competitor }}</view>
					</view>
					<view v-if="close" class="content-list-detail">
						<view class="list-left">备注</view>
						<view class="list-right">{{ data.desc }}</view>
					</view>
					<view class="content-list-detail" @click="closeType">
						<view v-if="close" class="list-left" style="width: 100%;text-align: center;color: #0081F1;">收起<u-icon name="arrow-up" color="#2979ff" size="28"></u-icon></view>
						<view v-else class="list-left" style="width: 100%;text-align: center;color: #0081F1;">展开<u-icon name="arrow-down" color="#2979ff" size="28"></u-icon></view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-xs" style="height: 666upx;position: relative;margin-top: 20upx;padding-top: 10upx;padding-left: 25upx;">
			<view class="font-30-color" style="margin-top: 29upx;">
				<text class="_imgs"></text>
				<text>沟通记录 ( 3 )</text>
			</view>
			<view style="position: absolute;left: 5upx;top: 50upx;">
				<view class="coures"></view>
				<view class="link-y"></view>
				<view class="coures" style="background-color: #999999;"></view>
				<view class="link-y"></view>
				<view class="coures" style="background-color: #0081F1;"></view>
			</view>
			<view style="color: #888888;font-size: 25upx;margin-top: 20upx;display: flex;justify-content: space-between;margin-right: 20upx;">
				<view>商雾</view>
				<view>04月13日 13:15:09</view>
			</view>
			<view style="color: #87B847;font-size: 24upx;margin-top: 10upx;">待你回复</view>
			<view style="font-size: 26upx;margin-top: 10upx;">这条是商务部人员查看后回复的工单</view>
			<view style="color: #888888;font-size: 25upx;margin-top: 70upx;display: flex;justify-content: space-between;margin-right: 20upx;">
				<view style="color: #000000;">吴俊</view>
				<view>04月13日 13:15:09</view>
			</view>
			<view style="font-size: 26upx;margin-top: 10upx;color: #888888;">这条是市场人员回复机构的内容，机构可再次发起回复 与机构签约的商务部人员也能查看此工单并回复。</view>
			<view style="color: #888888;font-size: 25upx;margin-top: 135upx;display: flex;justify-content: space-between;margin-right: 20upx;">
				<view style="color: #000000;">周大明</view>
				<view>04月13日 13:15:09</view>
			</view>
			<view style="color: #0081F1;font-size: 24upx;margin-top: 10upx;">发起工单</view>
			<view style="font-size: 26upx;margin-top: 10upx;color: #888888;">这条是机构发起的工单反馈，需要市场部人员回复</view>
		</view>
		<view class="content-xs" style="height: 646upx;position: relative;margin-top: 20upx;padding-top: 10upx;">
			<view class="font-30-color" style="margin-top: 29upx;margin-left: 25upx;">
				<text class="_imgs"><u-icon name="order" color="#333333" size="28"></u-icon></text>
				<text style="margin-left: 15upx;">工单反馈</text>
			</view>
			<view style="color: #888888;font-size: 25upx;margin-left: 25upx;margin-top: 20upx;">选择状态:</view>
			<view style="background-color: #F9F9F9;height: 75upx;margin: 20upx;">
				<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:name="item.name"
								:disabled="item.disabled"
								active-color="#0081F1"
								style="margin-left: 100upx;font-size: 26upx;margin-top: 10upx;"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
			</view>
						<view style="color: #888888;font-size: 25upx;margin-left: 25upx;margin-top: 20upx;">问题描述：</view>
						<view style="padding: 2%;">
							<u-input v-model="text" :type="type" :border="border" :height="height" :auto-height="autoHeight" placeholder="| 今天差不多了 谢谢问候！" />
						</view>
						<view class="btn" @click="get">反馈</view>
			<view class="content-xs-line">
			</view>
		</view>
		<popupXxgz ref="child"></popupXxgz>
		<popupGzbg ref="childGz"></popupGzbg>
		<bottom/>
	</view>
</template>

<script>
	import popupXxgz from '../../components/popup-xxgz/index.vue'
	import popupGzbg from '../../components/popup-gzbg/index.vue'
	import bottom from '../../components/bottom/index.vue'
	export default{
		components:{ popupXxgz, popupGzbg, bottom },
		data () {
			return {
				data: [],
				close: false,
				text: '',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				list: [
					{
						name: '处理中',
						disabled: false
					},
					{
						name: '已处理',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '处理中',
				id: '',
				clue_id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.clue_id = e.clue_id
		},
		mounted() {
			this.getFollowDetail()
		},
		methods:{
			closeType () {
				this.close = !this.close
			},
			openXs () {
				this.$refs.child.getOpen()
			},
			openGz () {
				this.$refs.childGz.getOpen()
			},
			get(){
				uni.showToast({
				    title: '反馈成功',
				    duration: 2000
				});
			},
			getFollowDetail() {
				this.$request('', '/agencyApi/v1/agencyWorkOrderLine', 'GET', {
					agency_id: '',
					id: this.id
				}, {
				}).then(res => {
					switch (res.data.status) {
						case 0:
						res.data.status = '待处理'
						break;
						case 1:
						res.data.status = '无意向'
						break;
						case 2:
						res.data.status = '考虑中'
						break;
						case 3:
						res.data.status = '已预约'
						break;
						case 4:
						res.data.status = '已试听'
						break;
						case 5:
						res.data.status = '已报名'
						break;
						case 6:
						res.data.status = '疑似报名'
						break;
					}
					this.data = res.data
					console.log(res.data)
				})
			},
			getRouter(){
				uni.navigateTo({
					url: '/pages/order/complaint'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.coures{
		width: 8upx;
		height: 8upx;
		background-color: #87B847;
		border-radius: 50%;
	}
	.link-y{
		width: 1upx;
		height: 235upx;
		background-color: #E2E2E2;
		margin-left: 4upx;
	}
	.btn{
		width: 164upx;
		height: 62upx;
		background: linear-gradient(to right, #2BA3FC, #0081F1);
		box-shadow: 0upx 0upx 20upx 0upx rgba(111, 192, 252, 0.9);
		border-radius: 10upx;
		line-height: 62upx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 10upx;
	}
	.list-contain{
		height: 264upx;
		width: 681upx;
		border: 1px solid #000000;
		margin: 0 auto;
		margin-top: 20upx;
	}
	.left-image{
		width: 270upx;
		height: 106upx;
		background-image: url(../../static/hjx.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 26upx;
		text-align: center;
		line-height: 106upx;
	}
	.right-image{
		width: 270upx;
		height: 106upx;
		background-image: url(../../static/ljx.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 26upx;
		text-align: center;
		line-height: 106upx;
	}
	.content-list-detail{
		display: flex;
		height: 66upx;
		width: 100%;
		line-height: 66upx;
		// text-align: center;
		.list-left{
			width: 187upx;
			height: 66upx;
			// background-color: rgb(31,157,250);
			// text-align: center;
			line-height: 66upx;
			color: #999999;
			padding-left: 10upx;
			overflow: hidden;/*超出部分隐藏*/
			white-space: nowrap;/*不换行*/
			text-overflow:ellipsis;/*超出部分文字以...显示*/
			font-size: 26upx;
		}
		.list-right{
			width: 430upx;
			height: 66upx;
			line-height: 66upx;
			// text-align: center;
			overflow: hidden;/*超出部分隐藏*/
			white-space: nowrap;/*不换行*/
			text-overflow:ellipsis;/*超出部分文字以...显示*/
			padding-left: 10upx;
			font-size: 26upx;
			// border-bottom: 1px solid #D2D2D2;
		}
	}
	.content-xs-line{
		width: 620upx;
		// height: 921upx;
		// border: 1upx solid #D2D2D2;
		border-radius: 10upx;
		margin: 0 auto;
		margin-top: 29upx;
		margin-bottom: 25upx;
	}
	._imgs{
		width: 36upx;
		height: 38upx;
		// border: 1upx solid #F8F8F8;
	}
	.font-30-color{
		font-size: 26upx;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #333333;
	}
	.content-xs{
		width: 90%;
		// height: 700upx;
		// border: 1px solid #DCDFE6;
		margin: 0 auto;
		position: relative;
		// top: 170upx;
		margin-left: 5%;
		background-color: #FFFFFF;
		border-radius: 10upx;
	}
	.content {
		height: 74upx;
		width: 100%;
		overflow: scroll;
		background-color: rgb(224,238,254);
		text-align: center;
		line-height: 74upx;
		color: #0081F1;
		font-size: 24upx;
		.site-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 45upx;
			.site-header-left{
				color: #FFFFFF;
				.site-header-font{
					font-size: 24upx;
				}
			}
		}
		.subtransactions-header{
			width: 100%;
			display: flex;
			// justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 130upx;
			color: #FFFFFF;
		}
	}
</style>
